<template>
	<div id="ShopIntro">
		<x-header :left-options="{showBack: false}" title="店铺资料" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="cert-content">
			<ul>
				<li class="upload vux-1px-b">
					<p>
						<input type="file" id="file0" class="fileWraps" name="image" accept="image/*" />
						<img v-if="shop_logo == ''" src="../assets/images/home/defaultImg.jpg" alt="" class="chooseImg" />
						<img v-else id="headimg" :src="'/los' + shop_logo" alt="" class="chooseImg" />
						<span>店铺头像</span>
					</p>
				</li>
				<li>
					<x-input title="店铺命名" type="text" @input="shopnameInput($event)" :value="shop_name" :show-clear="false" placeholder="店铺名称认证后不可更改" />
				</li>
				<li>
					<x-input title="经营类目" type="text" @input="shopTypeInput($event)" :value="shop_tags" :show-clear="false" placeholder="如翡翠，和田玉..." />
				</li>
				<li class="shopAdd">
					<popup-picker title="店铺地址" :data="radio1" :columns="1" v-model="checked" show-name placeholder="请选择">
					</popup-picker>
				</li>
				<li>
					<x-input title="详细地址" type="text" @input="shopDetailInput($event)" :value="detail_block" :show-clear="false" placeholder="请输入详细地址" />
				</li>
			</ul>
		</div>
		<div class="button" @click="shopSubmit()">提交申请</div>
		<loading :show="show1" text="上传中"></loading>
		<toast v-model="success" type="text" width='3.2rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import 'lrz/dist/lrz.all.bundle'
	import $ from 'jquery'
	import { XHeader, XInput, Toast, PopupPicker, Cell, Loading } from 'vux'
	export default {
		data() {
			return {
				shop_logo: '',
				shop_name: '',
				shop_id: '',
				shop_tags: '',
				market_id: '',
				checked: [],
				radio1: [],
				detail_block: '',
				urls: '',
				show1: false,
				success: false,
				msg: ''

			}
		},
		components: {
			XHeader,
			XInput,
			Toast,
			PopupPicker,
			Cell,
			Loading
		},
		mounted() {
			let _this = this;
			$("#file0").change(function() {
				let that = this;
				_this.show1 = true;
				lrz(that.files[0]).then((data) => {
					let str =
						'<img class="editImg" style="width: 1.13rem;height: 1.13rem;border-radius: 50%;" id="headimg" src ="' + data.base64 + '"/>' +
						'<input type="hidden" id="images" name="images" value="' + data.base64 + '"/>';
					$('.upload').find('p img').replaceWith(str);
					_this.show1 = false;
				})
			});
		},
		created() {
			this.getPersonInfo();
			this.getMarketList();
		},
		methods: {
			//店铺信息
			getPersonInfo: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/member/shop_info.json',
					data: ''
				}).then((result) => {
					if(result.data.code == 0) {
						this.shop_id = 0;
					} else {
						this.shop_logo = result.data.data.shop_logo;
						if(result.data.data.shop_name == JSON.parse(window.sessionStorage.getItem("member")).member_nickname) {
							this.shop_name == ''
						} else {
							this.shop_name = result.data.data.shop_name;
						}
						this.shop_id = result.data.data.shop_id;
						this.shop_tags = result.data.data.shop_tags;
						this.market_id = result.data.data.market_id;
						this.checked = this.market_id.toString();
						this.detail_block = result.data.data.shop_address;
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//获取店铺地址分类
			getMarketList: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/market/popup_picker.json',
					data: ''
				}).then((result) => {
					this.$nextTick(() => {
						this.radio1 = result.data;
					})
				}).catch((err) => {
					console.log(err);
				})
			},
			shopSubmit: function() {
				//店铺头像
				var vals = $('.upload').find('#images').val();
				var shop_params = {
					shop_name: this.shop_name,
					market_id: this.checked[0],
					shop_address: this.detail_block,
					shop_id: this.shop_id,
					shop_logo: vals,
					shop_tags: this.shop_tags,
				}
				if(this.shop_name == '' || vals == '' || this.shop_tags == '' || this.detail_block == '') {
					this.success = !this.success;
					this.msg = '请完善个人信息';
				} else {
					if(this.shop_id > 0) {
						this.urls = '/los/api/member/shop_edit.json'
					} else {
						this.urls = '/los/api/member/shop_add.json'
					}
					this.$http({
						method: 'POST',
						url: this.urls,
						data: shop_params
					}).then((result) => {
						this.success = !this.success;
						this.msg = result.data.msg;
						if(result.data.code == 1) {
							setTimeout(function() {
								location.href = "#/Certification"
							}, 1000)
						}
					}).catch((err) => {
						console.log(err);
					})
				}
			},
			shopnameInput: function(e) {
				this.shop_name = e;
			},
			shopDetailInput: function(e) {
				this.detail_block = e;
			},
			shopTypeInput: function(e) {
				this.shop_tags = e;
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.cert-content {
		background: #fff;
		width: 100%;
		position: relative;
		margin-top: 0.26rem;
		height: 100%;
	}
	
	.header {
		background: #fff;
	}
	
	.cert-content:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.cert-content ul {
		width: 100%;
		padding: 0 0.26rem;
	}
	
	.cert-content>ul li {
		width: 100%;
		height: 1.3rem;
		line-height: 1.3rem;
		position: relative;
		padding-top: 0.1rem;
	}
	
	.cert-content>ul li:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 1.3rem;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.cert-content>ul li .weui-cell {
		padding: 0!important;
	}
	
	.cert-content>ul li input {
		font-size: 0.37rem;
		color: #777;
	}
	
	.cert-content>ul li span {
		font-size: 0.37rem;
		color: #333;
		width: 2.1rem;
		line-height: 1.3rem;
		display: inline-block;
	}
	
	.upload p .fileWraps {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1.13rem;
		opacity: 0;
	}
	
	.upload #headimg {
		width: 1.13rem;
		height: 1.13rem;
		border-radius: 50%;
	}
	
	.upload .chooseImg {
		width: 1.13rem;
		height: 1.13rem;
		border-radius: 50%;
	}
	
	.upload p span {
		display: inline-block;
		float: left;
		font-size: 0.37rem;
		color: #333;
	}
	
	.button {
		width: 9.04rem;
		height: 1.17rem;
		background: #1874da;
		line-height: 1.17rem;
		color: #fff;
		text-align: center;
		font-size: 0.4rem;
		margin: 1.2rem 0.48rem 0.4rem;
		border-radius: 0.05rem;
	}
</style>